<template>
  <div class="mask" id="dialog_vm4" v-show="showDialog">
    <div class="dialog">
      <div class="dialog-header">
        <div class="title pos-left">{{take}} - {{dialogTitle}}</div>
        <ul class="tools pos-right">
          <li class="item">
            <button class="btn" type="button" @click="closeDialog">
              <i class="icon icon-close"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="dialog-body scroll">
        <ul class="panel">
          <li class="item">
            <input type="date" value class="datepicker" 
            v-model="startTime" :max="timeLimit" :min="timeMin" placeholder="开始时间">
          </li>
          <li class="item">至</li>
          <li class="item">
            <input type="date" value class="datepicker" 
            v-model="endTime" :max="timeLimit" :min="timeMin" placeholder="开始时间">
          </li>
          <li class="item">
            <input type="text" class="textbox" v-model="keyword" placeholder="请输入事项内容搜索">
          </li>
          <li class="item">
            <button class="btn bg-blue" type="button" @click="query()">
              <span class="text">查询</span>
            </button>
          </li>
        </ul>
        <table class="dtable">
          <thead>
            <tr>
              <td>序号</td>
              <td>事项内容</td>
              <td>事项类型</td>
              <td>事项性质</td>
              <td>申报人</td>
              <td>申报时间</td>
              <td>处理进度</td>
            </tr>
          </thead>
          <tbody v-if="list.length>0">
            <tr v-for="(item,idx) in list" :key="idx">
              <td style="width:5%;">{{idx + 1}}</td>
              <td style="width:30%;text-align:left;">
                <div :title="item.liContent">{{item.liContent}}</div>
              </td>
              <td style="width:15%;">
                <div :title="item.MatterInfoName">{{item.MatterInfoName}}</div>
              </td>
              <td style="width:10%;">
                <div :title="item.NatureInfoName">{{item.NatureInfoName}}</div>
              </td>
              
              <td style="width:15%;">
                <div :title="item.createUserName">{{item.createUserName}}</div>
              </td>
              <td style="width:15%;">
                <div :title="item.startDate">{{item.startDate}}</div>
              </td>
               <td style="width:10%;">
                <div :title="item.dqclUser">{{item.dqclUser}}</div>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="6">暂无信息</td>
            </tr>
          </tbody>
        </table>
        <x-pager
          :page="page"
          :page-size="pageSize"
          :total="total"
          :max-page="maxPage"
          @pagehandler="pageHandler"
        ></x-pager>
        <x-loading :show="showLoading"></x-loading>
      </div>
    </div>
  </div>
</template>
<script>
import Pager from "@/components/Pager";
import Loading from "@/components/Loading";
import axios from "axios";

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      total: 10,
      keyword:'',
      maxPage: 10,
      dialogTitle:'项目完结情况',
      startTime:this.dateShift(-365*2),
      endTime:this.dateShift(0),
      timeLimit:this.dateShift(0),
      timeMin:this.dateShift(-365*2),
      showDialog: false,
      showLoading: false,
      depname: this.take
    };
  },
  components: {
    "x-pager": Pager,
    "x-loading": Loading
  },
  props: {
    take: String,
    show: Boolean
  },
  methods: {
    pageHandler(page) {
      this.page = page;
      let params = {
        key: this.depname,
        keyword: this.keyword,
        pageSize: this.pageSize,
        pageIndex: this.page,
        startTime:this.startTime + ' 00:00:00',
        endTime:this.endTime + ' 23:59:59'
      };
      this.showLoading = true;
      axios.get(this.URLHEAD + "DDXMWCQKByPage", { params: params }).then(res => {
        let data = res.data;
        console.log(data);
        this.list = data.Data;
        this.total = data.count;
        this.showLoading = false;
      });
    },
    query(n) {
      this.depname = n?n:this.depname;
       if(n==undefined){
        this.startTime=this.startTime;
        this.endTime=this.endTime;
      }
      else{
         this.startTime=this.$parent.startTime;
         this.endTime=this.$parent.endTime;
      }
      this.showDialog = true;
      this.list = [];
      this.pageHandler(1);
    },
    reset() {
      this.pageSize = 10;
      this.page = 1;
      this.type = "";
    },
    closeDialog() {
      this.showDialog = false;
      this.reset();
      this.keyword=''
    }
  }
};
</script>